import Moment from 'moment';
import moment from 'moment';
import 'moment/locale/zh-cn';
import Calendar, { Props } from 'rc-calendar';
import 'rc-calendar/assets/index.css';
import zhCN from 'rc-calendar/lib/locale/zh_CN';
import DatePicker, { IPickerProps } from 'rc-calendar/lib/Picker';
import React from 'react';

const format = 'YYYY-MM-DD';
export interface IState {
  value?: Moment.Moment | undefined;
  showTime?: boolean;
  showDateInput?: boolean;
}

export default class Demo extends React.Component<IPickerProps, IState> {
  constructor(props: IPickerProps) {
    super(props);
    this.state = {
      showTime: true,
      showDateInput: true,
      value: this.props.defaultValue,
    };
  }
  public onChange = ( value?: any) => {
    this.setState({
      value,
    });
  }

  public getFormat(time: any) {
    return time ? format : 'YYYY-MM-DD';
  }

  public render() {
    const props = this.props;
    const calendar = (<Calendar
      locale={zhCN}
      defaultValue={props.defaultValue}
      showDateInput={this.state.showDateInput}
      onChange={this.onChange}
      disabledDate={props.disabledDate}
    />);
    return (
      <div style={{
        position: 'relative',
      }}
      >
        <DatePicker
          animation="slide-up"
          calendar={calendar}
          {...props}
        >
          {
            ({ value }: { value: moment.Moment }) => {
            return (
              <span>
                <input
                  placeholder={props.placeholder}
                  readOnly
                  tabIndex={-1}
                  value={value && value.format(this.getFormat(this.state.showTime)) || ''}
                  className="date-pick-input"
                />
                <span className="date-icon"></span>
              </span>
              );
            }
          }
        </DatePicker>
      </div>
    );
  }
}
